{% block sw_cms_element_vimeo_video_config %}
<div class="sw-cms-el-config-vimeo-video">

    {% block sw_cms_element_vimeo_video_config_video_id %}
    <sw-cms-inherit-wrapper
        field="videoID"
        :element="element"
        :label="$t('sw-cms.elements.vimeoVideo.config.label.videoId')"
    >
        <template #default="{ isInherited }">
            <mt-text-field
                v-model="videoID"
                class="sw-cms-el-config-vimeo-video__video-id"
                :placeholder="$t('sw-cms.elements.vimeoVideo.config.placeholder.videoId')"
                :disabled="isInherited"
            />
        </template>
    </sw-cms-inherit-wrapper>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_title %}
    <sw-cms-inherit-wrapper
        field="iframeTitle"
        :element="element"
        :label="$t('sw-cms.elements.vimeoVideo.config.label.videoTitle')"
    >
        <template #default="{ isInherited }">
            <mt-text-field
                v-model="element.config.iframeTitle.value"
                :placeholder="$t('sw-cms.elements.vimeoVideo.config.placeholder.videoTitle')"
                :disabled="isInherited"
            />
        </template>
    </sw-cms-inherit-wrapper>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_color %}
    <sw-cms-inherit-wrapper
        field="color"
        :element="element"
        :label="$t('sw-cms.elements.vimeoVideo.config.label.controlsColor')"
    >
        <template #default="{ isInherited }">
            <mt-colorpicker
                v-model="element.config.color.value"
                class="sw-cms-el-config-vimeo-video__color"
                :z-index="1001"
                :alpha="false"
                :disabled="isInherited"
            />
        </template>
    </sw-cms-inherit-wrapper>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_player_controls %}
    <div class="sw-cms-el-config-vimeo-video__player-controls">
        <sw-cms-inherit-wrapper
            field="autoplay"
            :element="element"
        >
            <template #default="{ isInherited }">
                {% block sw_cms_element_vimeo_video_config_autoplay %}
                <mt-switch
                    v-model="element.config.autoplay.value"
                    :help-text="$tc('sw-cms.elements.vimeoVideo.config.helpText.autoPlay')"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.autoPlay')"
                />
                {% endblock %}
            </template>
        </sw-cms-inherit-wrapper>

        {% block sw_cms_element_vimeo_video_config_do_not_track %}
        <sw-cms-inherit-wrapper
            field="doNotTrack"
            :element="element"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.doNotTrack.value"
                    :help-text="$tc('sw-cms.elements.vimeoVideo.config.helpText.advancedPrivacy')"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.advancedPrivacy')"
                />
            </template>
        </sw-cms-inherit-wrapper>
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_loop %}
        <sw-cms-inherit-wrapper
            field="loop"
            :element="element"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.loop.value"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.loop')"
                />
            </template>
        </sw-cms-inherit-wrapper>
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_controls %}
        <sw-cms-inherit-wrapper
            field="controls"
            :element="element"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.controls.value"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.showControls')"
                />
            </template>
        </sw-cms-inherit-wrapper>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_artist_information %}
    <div class="sw-cms-el-config-vimeo-video__artist-information">
        {% block sw_cms_element_vimeo_video_config_byline %}
        <sw-cms-inherit-wrapper
            field="byLine"
            :element="element"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.byLine.value"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.byLine')"
                />
            </template>
        </sw-cms-inherit-wrapper>
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_portrait %}
        <sw-cms-inherit-wrapper
            field="portrait"
            :element="element"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.portrait.value"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.showPortrait')"
                />
            </template>
        </sw-cms-inherit-wrapper>
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_title %}
        <sw-cms-inherit-wrapper
            field="title"
            :element="element"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.title.value"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.showTitle')"
                />
            </template>
        </sw-cms-inherit-wrapper>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_needs_confirmation %}
    <div class="sw-cms-el-config-vimeo-video__confirmation">
        <sw-cms-inherit-wrapper
            field="needsConfirmation"
            :element="element"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.needsConfirmation.value"
                    :disabled="isInherited"
                    :label="$t('sw-cms.elements.vimeoVideo.config.label.needsConfirmation')"
                />
            </template>
        </sw-cms-inherit-wrapper>
    </div>
    {% endblock %}

    <sw-cms-inherit-wrapper
        v-if="element.config.needsConfirmation.value"
        field="previewMedia"
        :element="element"
        :label="$t('sw-cms.elements.vimeoVideo.config.label.previewImage')"
    >
        <template #default="{ isInherited }">
            {% block sw_cms_element_vimeo_video_config_preview_media %}
            <sw-cms-mapping-field
                v-model:config="element.config.previewMedia"
                value-types="entity"
                entity="media"
                :disabled="isInherited"
            >
                <sw-media-upload-v2
                    variant="regular"
                    :upload-tag="uploadTag"
                    :source="previewSource"
                    :allow-multi-select="false"
                    :default-folder="cmsPageState.pageEntityName"
                    :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
                    :disabled="isInherited"
                    @media-upload-sidebar-open="onOpenMediaModal"
                    @media-upload-remove-image="onImageRemove"
                />

                    {% block sw_cms_element_vimeo_video_config_preview_media_display %}
                <template #preview="{ demoValue }">
                    <div class="sw-cms-el-config-image__mapping-preview">
                        <img
                            v-if="demoValue.url"
                            :src="demoValue.url"
                            alt=""
                        >
                        <mt-banner
                            v-else
                            class="sw-cms-el-config-image__preview-info"
                            variant="info"
                        >
                            {{ $tc('sw-cms.detail.label.mappingEmptyPreview') }}
                        </mt-banner>
                    </div>
                </template>
                    {% endblock %}
            </sw-cms-mapping-field>

                {% block sw_cms_element_vimeo_video_config_preview_media_upload_listener %}
            <sw-upload-listener
                :upload-tag="uploadTag"
                auto-upload
                @media-upload-finish="onImageUpload"
            />
                {% endblock %}

                {% block sw_cms_element_vimeo_video_config_preview_media_modal %}
            <sw-media-modal-v2
                v-if="mediaModalIsOpen"
                variant="full"
                :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
                :entity-context="cmsPageState.entityName"
                :allow-multi-select="false"
                :initial-folder-id="cmsPageState.defaultMediaFolderId"
                @media-upload-remove-image="onImageRemove"
                @media-modal-selection-change="onSelectionChanges"
                @modal-close="onCloseModal"
            />
                {% endblock %}
            {% endblock %}
        </template>
    </sw-cms-inherit-wrapper>
</div>
{% endblock %}
